{% extends "exam_system/base.html" %}
{% load static %}

{% block extra_head %}
<style>
    .input-group {
        position: relative;
        display: flex;
        align-items: center;
    }
    .input-group input {
        flex-grow: 1;
    }
    .optional-fields {
        display: none;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
    }
    .optional-fields.show {
        display: block;
        opacity: 1;
        max-height: 1000px;
    }
    /* 只在展开状态时添加过渡效果 */
    .optional-fields.animatable {
        transition: opacity 0.3s ease, max-height 0.3s ease;
    }
    .toggle-fields {
        color: #0d6efd;
        cursor: pointer;
        user-select: none;
        display: inline-flex;
        align-items: center;
        margin: 1rem 0;
    }
    .toggle-fields:hover {
        text-decoration: underline;
    }
    .toggle-icon {
        margin-left: 0.5rem;
        transition: transform 0.3s ease;
    }
    .toggle-icon.rotated {
        transform: rotate(180deg);
    }
    .is-valid {
        border-color: #28a745;
    }
    .is-invalid {
        border-color: #dc3545;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="text-center">考生注册</h3>
                </div>
                <div class="card-body">
                    {% if messages %}
                    <div class="messages">
                        {% for message in messages %}
                        <div class="alert alert-{{ message.tags }}">
                            {{ message }}
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}

                    <form method="post">
                        {% csrf_token %}
                        <!-- 必填字段 -->
                        {% for field in form %}
                            {% if field.field.required %}
                                {% if field.name == 'captcha' %}
                                    <div class="form-group mb-3">
                                        <label for="{{ field.id_for_label }}">验证码</label>
                                        {{ field }}<a class="btn btn-light btn-sm refresh-captcha" href="#">刷新验证码</a>
                                    </div>
                                {% else %}
                                    <div class="form-group mb-3">
                                    <label for="{{ field.id_for_label }}">{{ field.label }}{% if field.field.required %}*{% endif %}</label>
                                    <div class="input-group">
                                        {{ field }}
                                    </div>
                                    {% if field.help_text %}
                                        <small class="form-text text-muted">{{ field.help_text }}</small>
                                    {% endif %}
                                    {% for error in field.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ error }}
                                        </div>
                                    {% endfor %}
                                    </div>
                                {% endif %}
                            {% endif %}
                        {% endfor %}

                        <!-- 展开/收起按钮 -->
                        <div class="toggle-fields">
                            <span class="toggle-text">展开更多选项</span>
                            <svg class="toggle-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                                <path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
                            </svg>
                        </div>

                        <!-- 选填字段 -->
                        <div class="optional-fields">
                        {% for field in form %}
                            {% if not field.field.required and field.name != 'captcha' %}
                            <div class="form-group mb-3">
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                <div class="input-group">
                                    {{ field }}
                                </div>
                                {% if field.help_text %}
                                    <small class="form-text text-muted">{{ field.help_text }}</small>
                                {% endif %}
                                {% for error in field.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ error }}
                                    </div>
                                {% endfor %}
                            </div>
                            {% endif %}
                        {% endfor %}
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">注册</button>
                        </div>
                        <div class="text-center mt-3">
                            已有账号？<a href="{% url 'exam_system:login' %}">立即登录</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 展开/收起选填字段
    const toggleButton = document.querySelector('.toggle-fields');
    const optionalFields = document.querySelector('.optional-fields');
    const toggleIcon = document.querySelector('.toggle-icon');
    const toggleText = document.querySelector('.toggle-text');

    // 页面加载时确保选填字段处于隐藏状态
    optionalFields.style.display = 'none';

    toggleButton.addEventListener('click', function(e) {
        e.preventDefault(); // 防止可能的表单提交

        // 添加动画类
        optionalFields.classList.add('animatable');

        if (!optionalFields.classList.contains('show')) {
            // 展开
            optionalFields.style.display = 'block';
            // 触发重排以确保动画生效
            optionalFields.offsetHeight;
            optionalFields.classList.add('show');
        } else {
            // 收起
            optionalFields.classList.remove('show');
            setTimeout(() => {
                if (!optionalFields.classList.contains('show')) {
                    optionalFields.style.display = 'none';
                }
            }, 300); // 与CSS过渡时间匹配
        }

        toggleIcon.classList.toggle('rotated');
        toggleText.textContent = optionalFields.classList.contains('show') ? '收起选填项' : '展开更多选项';
    });

    const form = document.querySelector('form');
    const inputs = form.querySelectorAll('input:not([type="submit"])');

    inputs.forEach(input => {
        input.addEventListener('blur', function() {
            validateInput(this);
        });
    });

    function validateInput(input) {
        let isValid = true;

        // 简单的校验规则，可以根据需要修改
        if (input.value.trim() === '') {
            isValid = false;
        } else if (input.type === 'email') {
            isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value);
        } else if (input.name === 'username') {
            isValid = input.value.length >= 3;
        } else if (input.name === 'password') {
            isValid = input.value.length >= 8;
        }

        if (isValid) {
            input.classList.remove('is-invalid');
            input.classList.add('is-valid');
        } else {
            input.classList.remove('is-valid');
            input.classList.add('is-invalid');
        }
    }
});
</script>
{% endblock %}